<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>
		<scroll-view scroll-y="true" :style="'height:'+scrollViewHeight+'px'">
			<view>
				<view class="contentListOutInner">

					<view class="listDataInner">

						<view class="listDataInnerTop">
							<view class="listDataInnerTopLeft">
                <image class="listDataInnerTopLeftImg" v-if="listData.styleImgs!=''" :src="apiUrl+listData.styleImgs" mode=""></image>
                <image class="listDataInnerTopLeftImg" v-else src="/static/cuttingorder/cloth.png" mode=""></image>
							</view>
							<view class="listDataInnerTopRight">
								<text class="listDataInnerTopRightText">订单编号：{{listData.orderCode}}</text>
								<text class="listDataInnerTopRightText">款式：{{listData.styleName}}</text>
								<text class="listDataInnerTopRightText">日期：{{listData.createTime}}</text>
                <text class="listDataInnerTopRightText" v-if="listData.status=='0'">状态：未生产</text>
                <text class="listDataInnerTopRightText" v-if="listData.status=='1'">状态：生产中</text>
                <text class="listDataInnerTopRightText" v-if="listData.status=='2'">状态：生产完成</text>
							</view>

							<view class="listDataInnerTopRightImgBg">
								<image class="listDataInnerTopRightImg"
									src="../../../static/gongzuotai/shanchu-red@2x.png" mode="">
								</image>
							</view>

						</view>


						<view class="progress-box_out">

							<progress class="progress-box_progress" :percent="listData.percent" activeColor="#0081FF"
								backgroundColor="#ECF5FD" stroke-width="4" active='true' />
							<text class="progress-box_text">完成度 </text>
							<text class="progress-box_text1">{{listData.percent}}%</text>
						</view>

					</view>

				</view>



				<!-- 详情开始 -->
				<view class="contentCenter">

					<view class="contentCenterInner">

						<view class="contentCenterTop">
							<text class="contentCenterTopLeft">订单任务</text>
							<text class="contentCenterTopRight"></text>
						</view>

						<view class="baseListItemColorRight">


							<view class="baseListItemColorRightItem" v-for="(item2,index2) in listItem">
								<view class="baseListItemColorLeftInnerItemRight">

									<text class="baseListItemColorLeftInnerText_1">{{item2.title}}</text>
									<text class="baseListItemColorLeftInnerText">{{item2.content}}</text>
								</view>
							</view>

							<view class="baseListItemColorRightItem">
								<view class="baseListItemColorLeftInnerItemRight2">
									<!--                <text>工序：{{processData}}</text>-->
									<text class="baseListItemColorLeftInnerText_2">工序：</text>
									<text class="baseListItemColorLeftInnerText2">{{processData}}</text>
								</view>
							</view>


						</view>






						<!-- 每日完成列表 -->

						<view class="contentCenterInnerList">

							<view class="contentCenterInnerListItem">

								<view class="contentCenterTop">
									<text class="contentCenterTopLeft">{{today}} 完成情况</text>
									<text class="contentCenterTopRight"></text>
								</view>
								<view class="contentCenterInnerListItemContent">
									<view class="contentCenterInnerListItemContentTop">
										<text class="contentCenterInnerListItemContentTopText">今日扎数</text>
										<text class="contentCenterInnerListItemContentTopText">今日数量</text>
										<text class="contentCenterInnerListItemContentTopText">今日金额</text>
									</view>
									<view class="contentCenterInnerListItemContentBottom">
										<text
											class="contentCenterInnerListItemContentBottomText">{{todayData.total}}</text>
										<text
											class="contentCenterInnerListItemContentBottomText">{{todayData.quantity}}</text>
										<text
											class="contentCenterInnerListItemContentBottomText">{{todayData.price}}</text>
									</view>
								</view>
								<!-- 总完成情况 -->
								<view class="contentCenterTop">
									<text class="contentCenterTopLeft">总完成情况</text>
									<text class="contentCenterTopRight"></text>
								</view>
								<view class="contentCenterInnerListItemContent">
									<view class="contentCenterInnerListItemContentTop">
										<text class="contentCenterInnerListItemContentTopText">总扎数</text>
										<text class="contentCenterInnerListItemContentTopText">总数量</text>
										<text class="contentCenterInnerListItemContentTopText">总金额</text>
									</view>
									<view class="contentCenterInnerListItemContentBottom">
										<text
											class="contentCenterInnerListItemContentBottomText">{{allData.total}}</text>
										<text
											class="contentCenterInnerListItemContentBottomText">{{allData.quantity}}</text>
										<text
											class="contentCenterInnerListItemContentBottomText">{{allData.price}}</text>
									</view>
								</view>

							</view>
						</view>
						<!-- 扫菲记录 -->
						<view class="contentCenterInnerList">

							<view class="contentCenterInnerListItem">

								<view class="contentCenterTop">
									<text class="contentCenterTopLeft">扫菲记录</text>
									<text class="contentCenterTopRight"></text>
								</view>

								<view class="contentCountTimeNew">
									<view class="contentCenterInnerListItemContent2">
										<view class="contentCountTime">
											<!-- 列表标题 -->

											<view class="titleStyleNew">
												<text class="titleStyleNumNew">姓名</text>
												<text class="titleStyleNumNew">工序</text>
												<text class="titleStyleNumNew">价格</text>
												<text class="titleStyleNumNew">颜色</text>
												<text class="titleStyleNumNew">尺码</text>
												<text class="titleStyleNumNew">数量</text>
												<text class="titleStyleNumNew">扫菲时间</text>
											</view>

											<scroll-view scroll-y="true" class="titleStyleTitleNew">
												<!-- 列表内容 -->
												<view v-for="(item,index) in registerList">
													<view class="titleStyleListNew" v-if="index%2==0">
														<text class="titleStyleNumListNew">{{item.userName}}</text>
														<text class="titleStyleNumListNew">{{item.processName}}</text>
														<text class="titleStyleNumListNew">{{item.processPrice}}</text>
														<text class="titleStyleNumListNew">{{item.colors}}</text>
														<text class="titleStyleNumListNew">{{item.sizes}}</text>
														<text class="titleStyleNumListNew">{{item.quantity}}</text>
														<text class="titleStyleNumListNew">{{item.createTime}}</text>
													</view>
													<view class="titleStyleListElseNew" v-if="index%2!=0">
														<text class="titleStyleNumListNew">{{item.userName}}</text>
														<text class="titleStyleNumListNew">{{item.processName}}</text>
														<text class="titleStyleNumListNew">{{item.processPrice}}</text>
														<text class="titleStyleNumListNew">{{item.colors}}</text>
														<text class="titleStyleNumListNew">{{item.sizes}}</text>
														<text class="titleStyleNumListNew">{{item.quantity}}</text>
														<text class="titleStyleNumListNew">{{item.createTime}}</text>
													</view>
												</view>

											</scroll-view>

										</view>
									</view>
								</view>

							</view>
						</view>


					</view>


				</view>
				<!-- 详情结束 -->

			</view>
		</scroll-view>

	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'
	import {
		getOrderProduceDetail
	} from "@/pages/api/api";
  import config from "@/pages/api/config";

	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
				title: '详情',
				isback: true,
        apiUrl: config.apiUrl,

				listData: {},


				listItem: [{
						title: '扎号',
						content: '10'
					},
					{
						title: '数量',
						content: '0'
					}
				],
				processData: '',
				todayData: {},
				allData: {},

				// 列表数据
				listDataItem: [{
						zhaNumTitle: '今天扎数',
						todayNumTitle: '今天数量',
						todayAmount: '今天金额',
						zhaNumValue: '10',
						todayNumValue: '100',
						todayAmountValue: '1000',
						dec: '2024-09-20 完成情况',
						date: '2024-09-20'

					},
					{
						zhaNumTitle: '今天扎数',
						todayNumTitle: '今天数量',
						todayAmount: '今天金额',
						zhaNumValue: '10',
						todayNumValue: '100',
						todayAmountValue: '1000',
						dec: '2024-09-20 完成情况',
						date: '2024-09-20'
					},
					{
						zhaNumTitle: '今天扎数',
						todayNumTitle: '今天数量',
						todayAmount: '今天金额',
						zhaNumValue: '10',
						todayNumValue: '100',
						todayAmountValue: '1000',
						dec: '2024-09-20 完成情况',
						date: '2024-09-20'
					}

				],
				registerList: [],
				today: '',
				scrollViewHeight: 0,

			}
		},
		onLoad: function(option) {
			// 在其他页面或组件中访问
			const app = getApp();
			this.scrollViewHeight = app.globalData.scrollViewHeight2
			let item = JSON.parse(decodeURIComponent(option.item));
			this.listData = item;
			const now = new Date();
			this.today =
				`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
			this.orderProduceDetail(item.id);
		},
		methods: {
			orderProduceDetail(orderId) {
				getOrderProduceDetail(orderId).then(res => {
					if (res.code == 200) {
						let item = res.data
						this.processData = item.processNames
						if (this.listItem != undefined && this.listItem.length > 0) {
							this.listItem.forEach(row => {
								if (row.title == '扎号') {
									row.content = item.bundleCodes
								}
								if (row.title == '数量') {
									row.content = item.allTotal
								}
							})
						}

						this.todayData = item.todayData
						this.allData = item.allData
						this.registerList = item.registerList

						// this.registerList = [...this.registerList, ...this.registerList]


					}
				})
			},
		}
	}
</script>

<style>
	.titleStyleNumListNew {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 200rpx;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: left;
		font-style: normal;
		text-transform: none;
		white-space: nowrap;
	}

	.titleStyleListElseNew {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 100%;
		height: 80rpx;
		background: #F9FCFF;
	}

	.titleStyleListNew {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		width: 100%;
		height: 80rpx;

	}

	.titleStyleTitleNew {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 560rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
	}

	.titleStyleNumNew {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 200rpx;
		height: 100%;
		font-size: 24rpx;
		color: #FFFFFF;

		text-align: center;
		font-style: normal;
		text-transform: none;

		white-space: nowrap;
	}

	.titleStyleNew {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 100%;
		height: 80rpx;
		background: #0081FF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		margin-top: 42rpx
	}

	.contentCenterInnerListItemContent2 {

		display: flex;
		justify-content: center;
		flex-direction: column;

	}

	.contentCountTime {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
	}

	.contentCountTimeNew {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;

		white-space: nowrap;

		overflow-x: scroll;
		display: -webkit-box;
		overflow-y: hidden;
	}

	.contentCenterInnerListItemContentBottomText {

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		height: 100%;
		width: 100%;
		margin-left: 30rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		border-right: #ECF5FD solid 1rpx;
	}

	.contentCenterInnerListItemContentBottom {

		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
		height: 50%;
	}

	.contentCenterInnerListItemContentBottomNew {

		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
		height: 50%;
		white-space: nowrap;
		overflow-x: auto;
		display: -webkit-box;
		overflow-y: hidden;
	}

	.contentCenterInnerListItemContentTopText {

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		height: 100%;
		width: 100%;
		margin-left: 30rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		border-right: #ECF5FD solid 1rpx;
	}

	.contentCenterInnerListItemContentTopTextNew {


		font-weight: 500;
		font-size: 32rpx;
		color: #999999;
		min-height: 50rpx;
		/* height: 100%; */
		min-width: 100rpx;
		margin-left: 30rpx;
		display: inline-block;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: #000;

		white-space: nowrap;
	}

	.contentCenterInnerListItemContentTopNewScroll {

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 630rpx;

		background-color: aqua;
		white-space: nowrap;
	}

	.contentCenterInnerListItemContentTopNew {

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 50%;

		white-space: nowrap;

		overflow-x: auto;
		display: -webkit-box;
		overflow-y: hidden;

	}

	::-webkit-scrollbar {
		display: none;
	}

	.contentCenterInnerListItemContentTop {

		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
		height: 50%;
		color: #4d7df9;
	}

	.contentCenterInnerListItemContent {

		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 630rpx;
		/*min-height: 124rpx;*/

		height: 124rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.contentCenterInnerListItemContent2 {

		display: flex;
		justify-content: center;
		flex-direction: column;


		/* height: 124rpx; */
		/* 	background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 30rpx; */
	}


	.contentCenterInnerListItemContentNew {

		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		min-height: 124rpx;

		/* height: 124rpx; */
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 50rpx;


		white-space: nowrap;

		overflow-x: auto;
		display: -webkit-box;
		overflow-y: hidden;
	}

	.contentCenterInnerListItem {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;



		width: 100%;
	}

	.contentCenterInnerList {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		background: #F5F7F9;

		width: 100%;
		margin-top: 30rpx;
	}

	.baseListItemColorLeftInnerBg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		margin-right: 18rpx;


	}

	.baseListItemColorLeftInnerText_1 {
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #999999;
		line-height: 100rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.baseListItemColorLeftInnerText_2 {
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #999999;
		line-height: 100rpx;

		display: flex;
		justify-content: left;
		align-items: left;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.baseListItemColorLeftInnerText {

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.baseListItemColorLeftInnerText2 {

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.baseListItemColorLeftInnerItemRight {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 315rpx;
		height: 80rpx;
		/* background: #F5F7F9; */

		border-bottom: #F5F7F9 solid 1rpx;

	}

	.baseListItemColorLeftInnerItemRight2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 315rpx;
		height: 80rpx;

		border-bottom: #F5F7F9 solid 1rpx;

	}

	.baseListItemColorRight {

		display: flex;
		flex-direction: row;
		justify-content: center;

		width: 630rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 10rpx;


		flex-wrap: wrap;


	}

	.baseListItemColorRightItem {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		flex: 0 0 calc((100%)/2);

	}

	.contentCenterTopRight {
		display: flex;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 80rpx;
		margin-right: 30rpx;

	}

	.contentCenterTopLeft {
		display: flex;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
		line-height: 120rpx;
		margin-left: 30rpx;
	}

	.contentCenterTop {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
	}

	.contentCenterInner {
		width: 690rpx;
		margin-top: 30rpx;
		background: #F5F7F9;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.contentCenter {
		width: 750rpx;
		margin-top: 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}



	.listDataInnerTopRightText {
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;
		line-height: 50rpx;
	}


	.listDataInnerTopRightImgBg {
		display: flex;
		justify-content: center;
		align-items: center;

		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.listDataInnerTopRightImg {
		width: 50rpx;
		height: 50rpx;
		padding: 10rpx;

	}

	.listDataInnerTopRight {
		display: flex;
		flex-direction: column;
		align-items: left;


		margin-top: 30rpx;
	}

	.listDataInnerTopLeft {
		width: 190rpx;
		height: 190rpx;
		background: #ECF5FD;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		margin-right: 30rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}

	.listDataInnerTopLeftImg {
		width: 188rpx;
		height: 148rpx;

	}

	.progress-box_progress {
		display: flex;
		width: 380rpx;
		height: 10rpx;
		border-radius: 5rpx;
	}

	.progress-box_text {
		color: #666666;
		margin-left: 30rpx;
		font-size: 24rpx;
		font-weight: 600;
	}

	.progress-box_text1 {
		color: #0081FF;
		margin-left: 10rpx;
		font-size: 24rpx;
	}

	.progress-box {

		display: flex;
		flex-direction: row;

		display: flex;
		justify-conent: left;
		width: 380rpx;
		height: 6rpx;
		border-radius: 5rpx;

		/* background-color: #333333; */
	}

	.progress-box_out {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;

		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;

		border-radius: 5rpx;

		/* background-color: #333333; */
	}


	.listDataInnerTop {
		position: relative;
		display: flex;
		flex-direction: row;

		display: flex;
		justify-content: left;
		width: 100%;
		/* background: #0AE1C6; */


	}

	.listDataOut {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 750rpx;
		margin-top: 30rpx;
		height: 800rpx;
	}


	.contentListOutInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

	}

	.listDataInner {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;

		width: 690rpx;
		height: 295rpx;
		background: #FFFFFF;
		border-radius: 30rpx;


		margin-bottom: 30rpx;
	}
</style>
